<template>
  <div class="mode">
    <vue-particles
      color="#fff"
      :particle-opacity="0.7"
      :particles-number="50"
      shape-type="circle"
      :particle-size="4"
      lines-color="#fff"
      :lines-width="1"
      :line-linked="true"
      :line-opacity="0.4"
      :lines-distance="150"
      :move-speed="2"
      :hover-effect="true"
      hover-mode="grab"
      :click-effect="true"
      click-mode="push"
      class="lizi"
    />
    <div class="pb-box">
      <div class="item yunzhi" @click="goHome('yunzhi')">
        <img src="~@/assets/images/icon_03.png" />
        <p>云治</p>
      </div>
      <div class="item yunhu" @click="goHome('yunhu')">
        <img src="~@/assets/images/icon_08.png" />
        <p>云湖</p>
      </div>
      <div class="item yunsuan" @click="goHome('yunsuan')">
        <img src="~@/assets/images/icon_05.png" />
        <p>云算</p>
      </div>
      <div class="item yunmo" @click="goHome('yunmo')">
        <img src="~@/assets/images/icon_14.png" />
        <p>云模</p>
      </div>
      <div class="item yunce" @click="goHome('yunce')">
        <img src="~@/assets/images/icon_17.png" />
        <p>云测</p>
      </div>
      <div class="item yuntu" @click="goHome('yuntu')">
        <img src="~@/assets/images/icon_20.png" />
        <p>云图</p>
      </div>
      <div class="item dataStudio" @click="goHome('dataStudio')">
        <p>DataStudio</p>
      </div>
      <div class="item yunwen" @click="goHome('yunwen')">
        <img src="~@/assets/images/icon_29.png" />
        <p>云问</p>
      </div>
      <div class="item systemManager" @click="goHome('systemManager')">
        <img src="~@/assets/images/icon_26.png" />
        <p>SystemManager</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goHome(num) {
      this.$router.push({ path: "/" + num });
    }
  }
};
</script>
<style lang="scss" scoped>
.mode {
  min-height: 100%;
  width: 100%;
  background: linear-gradient(
    180deg,
    #1e202d 0%,
    #1a2465 56.99999999999999%,
    #10121a 100%
  );
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  .lizi {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .pb-box {
    width: 8.6rem;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;

    .item:hover {
      transition: all 0.6s;
      transform: scale(1.1);
    }

    .item {
      background-size: 100% 100%;
      break-inside: avoid;
      box-sizing: border-box;
      padding: 0.1rem;
      margin-right: 0.2rem;
      margin-top: 0.2rem;
      position: relative;
      z-index: 111;
      text-align: center;

      p {
        height: 0.4rem;
        line-height: 0.4rem;
        margin: 0.1rem 0 0 0;
        color: #fff;
        font-size: 0.3rem;
        font-family: Microsoft YaHei UI;
        font-weight: bold;
        color: #ffffff;
        background: linear-gradient(
          0deg,
          #ffffff 0%,
          #9cbfff 22.802734375%,
          #ffffff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        user-select: none;
        text-align: left;
      }

      img {
        width: 0.7rem;
        height: 0.53rem;
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
      }
    }

    .yunzhi {
      width: 4rem;
      height: 2rem;
      background: url("~@/assets/images/yunzhi.png");
    }

    .yunhu {
      width: 2rem;
      height: 2rem;
      background: url("~@/assets/images/yunhu.png");

      img {
        width: 0.51rem;
        height: 0.48rem;
      }
    }

    .yunsuan {
      width: 2rem;
      height: 2rem;
      background: url("~@/assets/images/yunsuan.png");

      img {
        width: 0.53rem;
        height: 0.53rem;
      }
    }

    .yunmo {
      width: 2rem;
      height: 2rem;
      background: url("~@/assets/images/yunmo.png");
      margin-right: 0.13rem;

      img {
        width: 0.57rem;
        height: 0.57rem;
      }
    }

    .yunce {
      width: 2rem;
      height: 2rem;
      background: url("~@/assets/images/yunce.png");
      margin-right: 0.13rem;

      img {
        width: 0.6rem;
        height: 0.56rem;
      }

      p {
        color: #3078ff;
        background: linear-gradient(
          0deg,
          #3078ff 0%,
          #3078ff 22.802734375%,
          #3078ff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .yuntu {
      width: 2rem;
      height: 2rem;
      background: url("~@/assets/images/yuntu.png");
      margin-right: 0.13rem;

      img {
        width: 0.59rem;
        height: 0.59rem;
      }
    }

    .dataStudio {
      width: 2rem;
      height: 4.2rem;
      background: url("~@/assets/images/dataStudio.png");

      p {
        height: auto;
        writing-mode: vertical-rl;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 55px auto 0;
      }
    }

    .yunwen {
      width: 2rem;
      height: 2rem;
      background: url("~@/assets/images/yunwen.png");
      margin-right: 0.13rem;
      position: absolute;
      top: 4.4rem;
      left: 0;

      img {
        width: 0.69rem;
        height: 0.52rem;
      }
    }

    .systemManager {
      width: 4rem;
      height: 2rem;
      background: url("~@/assets/images/stym.png");
      margin-right: 0.13rem;
      position: absolute;
      top: 4.4rem;
      left: 2.2rem;

      img {
        width: 0.63rem;
        height: 0.62rem;
      }

      p {
        margin-top: 0.15rem;
      }
    }
  }
}
</style>
